<header>
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        <a class="navbar-brand" href="/list" >学生信息管理系统</a>
      </div>
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav">
          <li><a href="/list" >首页</a></li>
          <li class="active"><a href="#">学生管理</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="container" style="margin-top:4.3rem;">
    <h2>学生查询及管理</h2>
  </div>

</header>
<div class="container toolbar" style="margin-top:0.8rem;margin-bottom:0.8rem;">
  <button class="btn btn-success" routerLink="/tian">添加学生</button>
  <button class="btn btn-warning" data-toggle="modal" data-target="#searchModal">
        <span class="glyphicon glyphicon-search"></span> 搜索
      </button>
</div>


<div class="modal fade" id="searchModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span>×</span></button>
        <h4 class="modal-title">学生信息搜索</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
          <div class="form-group">
            <label for="name" class="col-sm-3 control-label">姓名：</label>
            <div class="col-sm-4">
              <input id="name" name="name" class="form-control" placeholder="学生姓名" type="text" [(ngModel)]="student.name">
            </div>
          </div>
          <div class="form-group">
            <label for="none" class="col-sm-3 control-label">性别：</label>
            <div class="col-sm-4">
              <label class="radio-inline">
                    <input name="isMale" id="none" value="" checked="" type="radio" [(ngModel)]="student.isMale"> 不限
                  </label>
              <label class="radio-inline">
                    <input name="isMale" id="male" value="1" type="radio" [(ngModel)]="student.isMale"> 男
                  </label>
              <label class="radio-inline">
                    <input name="isMale" id="female" value="0" type="radio" [(ngModel)]="student.isMale"> 女
                  </label>
            </div>
          </div>
          <div class="form-group">
            <label for="phone" class="col-sm-3 control-label">手机：</label>
            <div class="col-sm-4">
              <input id="phone" name="phone" class="form-control" placeholder="手机号" type="text" [(ngModel)]="student.phone">
            </div>

          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">　关闭　</button>
        <button type="button" class="btn btn-success" data-dismiss="modal" (click)="souClick(student,$event)">　搜索　</button>
      </div>
    </div>
  </div>
</div>





<div class="container data">
  <div class="table-responsive">
    <table class="table table-bordered table-hover">
      <tbody>
        <tr>
          <th>姓名</th>
          <th class="text-center">性别</th>
          <th class="text-center">年龄</th>
          <th class="text-center">手机号</th>
          <th>电子邮箱</th>
          <th class="text-center">修改</th>
          <th class="text-center">删除</th>
        </tr>
        <tr *ngFor="let r of result | slice:start:end; let i= index">
          <td>{{r.name}}{{r.id}}</td>
          <td class="text-center">{{r.isMale =='1' ? '男':'女'}}</td>
          <td class="text-center">{{r.age}}</td>
          <td class="text-center">{{r.phone}}</td>
          <td>{{r.email}}</td>
          <td class="text-center">
            <span class="glyphicon glyphicon-edit" [routerLink]='"/edit/" +r.id'></span>
          </td>
          <td class="text-center">
            <span class="glyphicon glyphicon-trash" (click)="delate($event,r.id,r.name)"></span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

 

  <div class="ye">
    <button>《 </button>
    <button (click)="page(1)">1</button>
    <button (click)="page(2)">2</button>
    <button (click)="page(3)">3</button>
    <button (click)="page(4)">4</button>
    <button (click)="page(5)">5</button>
    <button (click)="page(6)">6</button>
    <button> 》</button>
  </div>